"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowRight, Droplets, Leaf, BarChart3, Settings, Cloud, Database } from "lucide-react"
import { apiService } from "@/lib/services/api"

interface FeatureCardProps {
  icon: React.ReactNode
  title: string
  description: string
}

interface TechItemProps {
  name: string
  description: string
}

function FeatureCard({ icon, title, description }: FeatureCardProps) {
  return (
    <Card className="border-none shadow-md hover:shadow-lg transition-shadow">
      <CardHeader className="pb-2">
        <div className="mb-2 text-primary">{icon}</div>
        <CardTitle className="text-lg">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <CardDescription className="text-gray-600">{description}</CardDescription>
      </CardContent>
    </Card>
  )
}

function TechItem({ name, description }: TechItemProps) {
  return (
    <li className="flex items-start">
      <div className="bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-medium mr-3">{name}</div>
      <span className="text-gray-600">{description}</span>
    </li>
  )
}

export default function Home() {
  const router = useRouter();

  const handleQuickStart = async () => {
    try {
      const response = await apiService.auth.guestLogin();
      if (response.error) {
        console.error('访客登录失败:', response.error);
        return;
      }
      router.push("/dashboard");
    } catch (error) {
      console.error('访客登录失败:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="pt-20 pb-16 text-center">
        <h1 className="text-4xl font-extrabold text-gray-900 mb-4">
          水肥一体化灌溉系统
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
          智能、高效、环保的现代农业灌溉解决方案
        </p>
        <div className="flex justify-center gap-4">
          <Button
            onClick={handleQuickStart}
            className="px-6 py-3 text-white bg-green-600 hover:bg-green-700 rounded-lg font-medium transition-colors"
          >
            快速开始
          </Button>
          <Link
            href="/login"
            className="px-6 py-3 text-primary bg-white border-2 border-primary hover:bg-primary/10 rounded-lg font-medium transition-colors"
          >
            登录系统
          </Link>
          <Link
            href="/register"
            className="px-6 py-3 text-gray-600 bg-white border-2 border-gray-600 hover:bg-gray-50 rounded-lg font-medium transition-colors"
          >
            注册账号
          </Link>
        </div>
      </div>

      {/* Features Section */}
      <div className="max-w-6xl mx-auto px-4 py-16">
        <h2 className="text-2xl font-bold text-center mb-12">系统特点</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <FeatureCard
            icon={<Droplets className="w-8 h-8" />}
            title="智能灌溉控制"
            description="基于传感器数据和AI算法，实现精准灌溉控制，节约水资源"
          />
          <FeatureCard
            icon={<Leaf className="w-8 h-8" />}
            title="营养管理"
            description="智能配比水肥混合，确保作物获得最佳营养供给"
          />
          <FeatureCard
            icon={<BarChart3 className="w-8 h-8" />}
            title="数据分析"
            description="实时监测和分析系统运行数据，提供决策支持"
          />
          <FeatureCard
            icon={<Cloud className="w-8 h-8" />}
            title="远程监控"
            description="随时随地通过移动设备监控和管理灌溉系统"
          />
          <FeatureCard
            icon={<Database className="w-8 h-8" />}
            title="数据存储"
            description="安全可靠的数据存储和备份机制，确保数据安全"
          />
          <FeatureCard
            icon={<Settings className="w-8 h-8" />}
            title="灵活配置"
            description="支持多种灌溉方案配置，适应不同作物需求"
          />
        </div>
      </div>

      {/* Tech Stack Section */}
      <div className="bg-white py-16">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-2xl font-bold text-center mb-12">技术优势</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-4">
              <TechItem
                name="实时监控"
                description="采用先进的传感器技术，实时监测土壤墒情、气象条件等关键数据"
              />
              <TechItem
                name="智能决策"
                description="基于机器学习算法，自动优化灌溉策略和施肥方案"
              />
              <TechItem
                name="远程控制"
                description="支持手机APP和Web端远程操作，实现灌溉系统远程管理"
              />
            </div>
            <div className="space-y-4">
              <TechItem
                name="数据安全"
                description="采用加密传输和存储技术，确保系统数据安全"
              />
              <TechItem
                name="系统集成"
                description="支持与其他农业管理系统无缝集成，提供完整解决方案"
              />
              <TechItem
                name="可扩展性"
                description="模块化设计，支持系统功能灵活扩展和定制"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
